:host {
  display:flex;
  flex-direction: column;
}

.controls-holder {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 10px;
}

.cell {
  cursor: pointer;
  background: #e6e6e6;
}

.header-cell {
  cursor: pointer;
}

.cell.diagonal {
  background: #b5bcc3;
}

.cell.selected {
  background: #ffe839;
}

.cell:hover {
  background: #faf49f;
}

.dropdown {
  max-width: fit-content;
}

.dropdown-holder {
  padding: 0 8px;
}

/* Make the "Rows" and "Columns" labels the same width */
.dropdown-label {
  display: inline-block;
  width: 55px;
}

.matrix-holder {
  width: fit-content;
}

.table-and-row-title-holder {
  display: flex;
  width: fit-content;
}

.row-title {
  font-size: 11px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  margin-right: 10px;
}

.column-title {
  font-size: 11px;
  margin-bottom: 5px;
  margin-left: 28px;
  text-align: center;
}
